import React, { useState } from 'react';
import { Card, Button, message, Space, App as AntdApp } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import setupMenuData from '@/utils/setupMenuData';

const SetupMenuPage: React.FC = () => {
  const { modal } = AntdApp.useApp();
  const [loading, setLoading] = useState(false);

  const handleSetupMenus = async () => {
    setLoading(true);
    try {
      modal.confirm({
        title: '确认设置菜单数据',
        content: '这将创建或更新菜单数据为动态路由所需的格式，是否继续？',
        onOk: async () => {
          await setupMenuData();
          message.success('菜单数据设置成功');
        },
      });
    } catch {
      message.error('菜单数据设置失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: 24 }}>
      <Card
        title="菜单数据设置"
        extra={<SettingOutlined />}
        style={{ maxWidth: 800, margin: '0 auto' }}
      >
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          <div>
            <h3>功能说明</h3>
            <p>此页面用于初始化或更新菜单数据，配置为动态路由所需的格式。</p>
            <p>包括：</p>
            <ul>
              <li>系统管理模块（用户管理、角色管理、菜单管理、日志管理）</li>
              <li>数据管理模块（数据字典等）</li>
              <li>配置正确的组件路径和权限标识</li>
            </ul>
          </div>

          <div>
            <h3>注意事项</h3>
            <p>• 此操作会创建新的菜单或更新现有菜单</p>
            <p>• 请确保已登录并具有菜单管理权限</p>
            <p>• 操作前建议备份现有菜单数据</p>
          </div>

          <Button
            type="primary"
            size="large"
            loading={loading}
            onClick={handleSetupMenus}
            style={{ width: '100%' }}
          >
            开始设置菜单数据
          </Button>
        </Space>
      </Card>
    </div>
  );
};

export default SetupMenuPage;